<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04-组件-父组件把方法传递给子组件</title>
  <script src="libs/vue.js"></script>
</head>

<body>

  <!-- 子组件通过 v-on 形式将父组件的方法绑定在子组件上 -->

  <div id="app">
    <com1 v-on:fnc="show"></com1>
    <div>{{msg}}</div>
  </div>

  <template id="temp1">
    <div>
      <h1>这是子组件的内容</h1>
      <button @click="myclick">这里触发父组件的方法</button>
    </div>
  </template>

  <script>
    // 创建一个字面量类型的 组件模板对象
    const com1 = {
      template: '#temp1', // 通过指定一个 id，表示要加载这个指定 id 的 template 元素中的内容，当作组件的html结构
      data() {
        return {
          temp: {
            name: '小猪佩奇',
            age: 2
          }
        }
      },
      methods: {
        myclick() {
          // emit 在英文中是触发的意思
          // 在子组件的方法中通过 $emit 方式触发父组件中传递过来的方法
          // this.$emit('fnc')
          // 通过这种方式，相当于变相的子组件给父组件传值
          // this.$emit('fnc', 123, 456)
          this.$emit('fnc', this.temp)
        }
      },
    }


    const vm = new Vue({
      el: '#app',
      data: {
        msg: null
      },
      methods: {
        show(data, data2) {
          console.log('调用了父组件中的 show 方法-----' + data + '-------' + data2)
          this.msg = data
          console.log(this.msg)
        }
      },

      components: {
        com1
      }
    })
  </script>

</body>

</html>